<template>
  <div class=main>
    <el-dropdown :visible-arrow="false" style="border: none" v-model:visible="dropdownVisible" @command="handleCommand"
      @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <el-icon :class="{ jump: isHover }" class="icon">
        <ChatRound @click="router.push('/home/message')" />
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu class="custom-dropdown-menu" style="border: none">
          <el-dropdown-item style="border: none" command="a">
            点赞消息
            <el-icon style="margin-left: 5px">
              <ArrowRight />
            </el-icon>
          </el-dropdown-item>
          <el-dropdown-item command="b">
            系统消息
            <el-icon style="margin-left: 5px">
              <ArrowRight />
            </el-icon>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import 'element-plus/dist/index.css'
import {useRoute, useRouter} from "vue-router";
import { ArrowRight,ChatRound } from '@element-plus/icons-vue'
const router = useRouter()
const isHover = ref(false)
const dropdownVisible = ref(false)

const handleMouseEnter = () => {
  isHover.value = true
  dropdownVisible.value = true
}

const handleMouseLeave = () => {
  isHover.value = false
  // 延迟关闭下拉框，以便用户可以移动到下拉菜单上
  setTimeout(() => {
    if (!isHover.value) {
      dropdownVisible.value = false
    }
  }, 200)
}

const handleCommand = (command) => {
  console.log(command)
}
const props = defineProps({
  iconColor: {
    type: String,
    default: '',
  }
});
</script>

<style scoped>
.main{
  margin: 5px;
}
.iconfont {
  border: none;
  transition: transform 0.2s ease-in-out;
  /* 添加过渡效果 */
}
.jump {
  border: none;
  animation: jumpAnimation 0.5s ease 1 !important; /* 添加跳动动画 */
}

@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px); /* 向上跳动 */
  }
  100% {
    transform: translateY(0);
  }
}

.custom-dropdown-menu {
border: none !important; /* 移除边框 */
  box-shadow: none !important; /* 移除阴影 */
  padding: 0;
  border: none;
}
.icon{
  font-size: 30px;
  cursor: pointer;
  border: none;
  color: v-bind(iconColor);
}
</style>